<ui:composition
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:p="http://primefaces.org/ui"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:cc="http://java.sun.com/jsf/composite/cc"
        xmlns:c="http://java.sun.com/jsp/jstl/core"
        template="/resources/layout/common-layout.xhtml">

    <ui:define name="demoSampleParameters">
    </ui:define> 
    <ui:define name="head">
    </ui:define>
    <ui:define name="toolbar">
        <h:form prependId="false">
            <p:menubar widgetVar="t">
                <c:forEach items="${coursesController.menu.subMenus}" var="subMenu" varStatus="subMenuStatus">
                    <p:submenu label="#{subMenu.text}">
                        <c:forEach items="${subMenu.menuItems}" var="menuItem" varStatus="menuItemStatus">
                            <p:menuitem value="#{menuItem.text}"  url="#{menuItem.url}" />
                        </c:forEach>
                    </p:submenu>
                </c:forEach>
            </p:menubar>
        </h:form>
    </ui:define>
    <ui:define name="content">
        <style type="text/css">
            .search-col1 { text-align: left; }
            .search-col2 { text-align : right; }
            .search-text { text-align: right; width : 85%; }
            .search-button { width : 10%; }
            .search-status { width : 5%; }
        </style>
        <p:growl id="growl" showDetail="true" showSummary="true" globalOnly="true"/>
        <h:form id="h2" prependId="false">
            <p:panel id="commands" styleClass="width100pc">
                <h:panelGrid columns="2" columnClasses="search-col1,search-col2" styleClass="width100pc">
                    <h:panelGrid columns="4">
                        <p:message for="a01" display="icon" showDetail="false" showSummary="false"/>
                        <p:commandButton
                                id="b10"
                                value="#{msgs['btn.add']}"
                                actionListener="#{venuesController.dataModel.onAdd}"
                                ajax="true"
                                update="modify_display modify_messages modify_buttons growl"
                                onsuccess="modifyDialogVar.show()"/>
                        <p:commandButton
                                id="b11"
                                value="#{msgs['btn.refresh']}"
                                actionListener="#{venuesController.dataModel.onLoad}"
                                ajax="true"
                                update="dt1 growl"/>
                        #{" "} #{msgs['prompt.table.actions']}
                    </h:panelGrid>
                    <h:panelGrid columns="3" styleClass="width100pc" columnClasses="search-text,search-button,search-status">
                        <h:inputText id="a01" value="#{venuesController.dataModel.searchText}" label="#{msgs['fld.search']}"/>
                        <p:watermark for="a01" value="#{msgs['fld.search']}..." />
                        <p:commandButton
                            id="b30"
                            ajax="true"
                            value="#{msgs['btn.search']}"
                            update="dt1 growl"
                            actionListener="#{venuesController.dataModel.onSearch}"
                            oncomplete="onSearchComplete(xhr, status, args)"/>
                        <p:ajaxStatus id="as1" style="height:24px;display:block;" widgetVar="statusVar">
                            <f:facet name="start"><h:graphicImage value="../resources/images/loading.gif"/></f:facet>
                            <f:facet name="complete"><h:outputText value=""/></f:facet>
                        </p:ajaxStatus>
                    </h:panelGrid>
                </h:panelGrid>
            </p:panel>
        </h:form>
        <h:form id="h1" prependId="false">
            <p:dataTable
                    id="dt1"
                    widgetVar="dt1Var"
                    binding="#{venuesController.dataTable}"
                    var="row"
                    value="#{venuesController.dataModel.rows}"
                    rows="10"
                    height="500"
                    paginator="true"
                    paginatorAlwaysVisible="true"
                    style="vertical-align:text-top;"
                    selectionMode="single"
                    selection="#{venuesController.dataModel.selected}"
                    onRowSelectUpdate="h3"
                    onRowSelectComplete="modifyDialogVar.show()">
	
                <p:column sortBy="#{row.object.id}" filterBy="#{row.object.id}" filterStyle="width:100%"  style="width:10px" headerText="#">
                    <h:outputText value="#{row.object.id}"/>
                </p:column>
                <p:column sortBy="#{row.object.name}" filterBy="#{row.object.name}" filterStyle="width:100%" style="width:300px" headerText="#{msgs['fld.name']}">
                    <p:cellEditor>
                        <f:facet name="output"><h:outputText value="#{row.object.name}" /></f:facet>
                        <f:facet name="input"><h:inputText value="#{row.object.name}"/></f:facet>
                    </p:cellEditor>
                </p:column>
                <p:column sortBy="#{row.object.gps}" filterBy="#{row.object.gps}" filterStyle="width:100%" style="width:300px" headerText="#{msgs['fld.gps']}">
                    <p:cellEditor>
                        <f:facet name="output"><h:outputText value="#{row.object.gps}" /></f:facet>
                        <f:facet name="input"><h:inputText value="#{row.object.gps}" /></f:facet>
                    </p:cellEditor>
                </p:column>
                <p:column sortBy="#{row.object.address}" filterBy="#{row.object.address}" filterStyle="width:100%" headerText="#{msgs['fld.address']}">
                    <p:cellEditor>
                        <f:facet name="output"><h:outputText value="#{row.object.address}" /></f:facet>
                        <f:facet name="input"><h:inputText value="#{row.object.address}" /></f:facet>
                    </p:cellEditor>
                </p:column>
                <ui:remove><!--
                <p:column headerText="#{msgs['fld.options']}" style="width:100px">
                    <p:rowEditor />  
                </p:column>
                --></ui:remove>
            </p:dataTable>
        </h:form>
        <h:form id="h3" prependId="false">
            <p:dialog
                    id="modifyDialog"
                    header="#{msgs['dlg.venue']}"
                    widgetVar="modifyDialogVar"
                    resizable="false"
                    width="500"
                    modal="true"
                    showEffect="explode"
                    hideEffect="explode">
                <p:fieldset legend="#{msgs['pnl.fields']}">
                    <cc:venueForm bean="#{venuesController.dataModel.selected.object}" />
                </p:fieldset>
                <p:fieldset legend="#{msgs['pnl.messages']}">
                    <h:panelGrid id="modify_messages" columns="1">
                        <p:messages id="m1" showDetail="true" showSummary="false" globalOnly="false"  />
                    </h:panelGrid>
                </p:fieldset>
                <h:panelGrid id="modify_buttons" columns="3" cellpadding="4">
                    <p:commandButton
                            id="b1"
                            value="#{msgs['btn.save']}"
                            image="ui-icon ui-icon-disk"
                            actionListener="#{venuesController.dataModel.onSave}"
                            ajax="true"
                            oncomplete="onSaveComplete(xhr, status, args)"
                            update="dt1 modify_display modify_messages"
                            />
                    
                    <p:commandButton
                            id="b4"
                            value="#{msgs['btn.delete']}"
                            image="ui-icon ui-icon-minus"
                            actionListener="#{venuesController.dataModel.onDelete}"
                            ajax="true"
                            rendered="#{venuesController.dataModel.selected.object.id ne null}"
                            oncomplete="onDeleteComplete(xhr, status, args)"
                            update="dt1 modify_display modify_messages"
                            />
                    
                    <p:commandButton
                            id="b3"
                            image="ui-icon ui-icon-close"
                            value="#{msgs['btn.close']}"
                            onclick="modifyDialogVar.hide()"
                            update="dt1 modify_display modify_messages"
                            />
                </h:panelGrid>
            </p:dialog>
        </h:form>

        <script type="text/javascript">

        function onDeleteComplete(xhr, status, args) {
            if (args.validationFailed) {
                return false;
            }
            if (args.result != null) {
                if (args.result.failed) {
                    return false;
                }
            }
            modifyDialogVar.hide();
            return true;
        }

        function onSaveComplete(xhr, status, args) {
            if (args.validationFailed) {
                return false;
            }
            if (args.result != null) {
                if (args.result.failed) {
                    return false;
                }
            }
            modifyDialogVar.hide();
            return true;
        }

        function onAddComplete(xhr, status, args) {
            if (args.validationFailed) {
                return false;
            }
            if (args.result != null) {
                if (args.result.failed) {
                    return false;
                }
            }
            modifyDialogVar.hide();
            return true;
        }
        </script>
    </ui:define>
</ui:composition>
